<template>
  <div>
    <header>
      <div class="h-top">
        <div class="address" @click="goCity">
          <span class="iconfont">&#xf0205;</span>
          杭州市
        </div>
        <van-search
          v-model="value"
          placeholder="请输入搜索关键词"
          shape="round"
          @focus="gosearch"
        />
        <span class="iconfont">&#xe68e;&nbsp;&nbsp;&#xec2e;</span>
      </div>
      <div class="h-mid">
        <van-sticky>
          <van-tabs v-model="active" @click-tab="getTitle">
            <van-tab title="漫展"> </van-tab>
            <van-tab title="演唱会"></van-tab>
            <van-tab title="音乐会"></van-tab>
            <van-tab title="展示会"></van-tab>
            <van-tab title="舞台剧"></van-tab>
          </van-tabs>
        </van-sticky>
      </div>
      <div class="h-bot">
        <!-- <div>最近开展 <img src="@/assets/img/index-1.png" alt="" /></div> -->
        <van-dropdown-menu>
          <van-dropdown-item v-model="value1" :options="option1" />
          <van-dropdown-item v-model="value2" :options="option2" />
          <van-dropdown-item v-model="value3" :options="option3" />
        </van-dropdown-menu>
      </div>
    </header>
    <index-anime v-show="target == '漫展'"></index-anime>
    <index-vocal v-show="target == '演唱会'"></index-vocal>
    <index-Music v-show="target == '音乐会'"></index-Music>
    <index-Exhibition v-show="target == '展示会'"></index-Exhibition>
    <index-Living v-show="target == '舞台剧'"></index-Living>
  </div>
</template>

<script>
import { ref, provide } from "vue";
import { useRouter } from "vue-router";
import { Search, Tab, Tabs, Sticky, DropdownMenu, DropdownItem } from "vant";

import indexAnime from "./index/Anime.vue";
import indexVocal from "./index/Vocal.vue";
import indexMusic from "./index/Music.vue";
import indexExhibition from "./index/Exhibition.vue";
import indexLiving from "./index/Living";

export default {
  setup() {
    //分类变量数据
    const active = ref(2);
    const value1 = ref(0);
    const value2 = ref(0);
    const value3 = ref(0);
    const option1 = [{ text: "最近开展", value: 0 }];
    const option2 = [
      { text: "全部类型", value: 0 },
      { text: "综合同人展", value: 1 },
      { text: "ONLY", value: 2 },
      { text: "游戏展", value: 3 },
      { text: "线上活动", value: 4 },
      { text: "官方活动", value: 5 },
      { text: "综合展", value: 6 },
    ];
    const option3 = [
      { text: "开展中", value: 0 },
      { text: "已结束", value: 1 },
    ];
    //匹配
    const target = ref("漫展");

    //搜索框绑定变量
    const value = ref("");
    //路由
    const router = useRouter();
    //分类数据依赖至（Anime.vue）
    provide("cla", value2);
    provide("opa", value3);

    //城市页点击跳转
    const goCity = () => {
      router.push("/city");
    };
    //搜索栏页面跳转
    const gosearch = () => {
      router.push("/exhibition");
    };
    //获取索引
    const getTitle = ({ title }) => {
      target.value = title;
    };
    return {
      value,
      active,
      value1,
      value2,
      value3,
      option1,
      option2,
      option3,
      goCity,
      getTitle,
      target,
      gosearch,
    };
  },
  components: {
    vanSearch: Search,
    vanTabs: Tabs,
    vanTab: Tab,
    vanSticky: Sticky,
    vanDropdownMenu: DropdownMenu,
    vanDropdownItem: DropdownItem,
    indexAnime,
    indexVocal,
    indexMusic,
    indexExhibition,
    indexLiving,
  },
};
</script>

<style lang="less" scoped>
header {
  .h-top {
    background: #fff;
    display: flex;
    height: 60px;
    line-height: 60px;
    .address {
      font-size: 14px;
      span {
        margin-left: 8px;
        font-size: 22px;
        vertical-align: middle;
      }
    }
    span {
      font-size: 20px;
    }
  }
  .h-mid {
    background: #fff;
  }
  .van-dropdown-menu__bar {
    box-shadow: none;
  }
  .van-popup--top {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
  }
}
</style>
